<template>
	<view class="container">
		<view class="top">
			<image class="prev-icon" src="../../static/images/room/prev.png" mode="aspectFit" @click="prev"></image>
			<view class="myroom">创建场景</view>
			<view class="plus-icon-container">
				<image class="plus-icon" src="../../static/images/room/more.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="if-List">
			<view class="text-List">
				<view class="if_and">
					<view class="if">如果</view>
					<view class="if_text">选择触发条件</view>
				</view>
				<image class="if_image" src="../../static/images/mode/add.png"></image>
			</view>
			<view class="text-List1">
				<image class="text_image" src="../../static/images/mode/clock.png"></image>
				<view class="if_and1">
					<view class="if1">选择时间:{{selectedTime.time}}</view>
					<view class="if_text selected-items">
						<view v-if="isDaily" class="selected-item">每日</view>
						<view v-else v-for="day in selectedDays" :key="day" class="selected-item">{{ day }}</view>
					</view>
				</view>
				<image class="if_image1" src="../../static/images/mode/cancel.png"></image>
			</view>
		</view>
		<view class="device-List2">
			<view class="text-List">
				<view class="if_and">
					<view class="if">执行</view>
					<view class="if_text">选择触发效果</view>
				</view>
				<image class="if_image" src="../../static/images/mode/add.png" @click="openModal"></image>
			</view>
			<view class="text-List" v-for="(selection, index) in selections" :key="index">
				<!-- <image :src="'../../static/images/device/' + selection.device.devicePic + '.png'" class="text_image1">
				</image> -->
				<image :src="getDeviceIcon(selection.device.devicePic )" class="text_image1"></image>
				<!-- <image v-bind:src="'../../static/images/device/${selection.device.devicePic}.png'" class="text_image1" ></image> -->
				<view class="if_and1">
					<view class="if_text">
						<view class="if1">{{ selection.devicename}}</view>
						{{ selection.room }} 的 {{ selection.devicename }} 将 {{ selection.status }}{{selection.deviceid}}
					</view>
				</view>
				<image class="if_image1" src="../../static/images/mode/cancel.png" @click="removeSelection(index)">
				</image>
			</view>
		</view>
		<view class="device-List3">
			<view class="text-List">
				<view class="if_and">
					<view class="if">风格</view>
					<view class="if_text">选择喜欢的风格图</view>
				</view>
				<image class="if_image2" src="../../static/images/mode/lable.png" @click="openStyleModal"></image>
			</view>
		</view>
		<button class="button" type="primary" @click="submitSelection">提交</button>
		<!-- <view class="selectedList">
			<view v-if="isDaily" class="selected-item">每日</view>
			<view v-else v-for="day in selectedDays" :key="day" class="selected-item">{{ day }}</view>
		</view>
		<view class="selectedTime">
			选择的时间: {{ selectedTime.time }}
		</view>
		<view class="modeStatus">
			模式状态: {{ modeStatus }}
		</view> -->
		<ModalComponent :show="isModalVisible" :RoomName="roomName" :devices="deviceList" @close="closeModal"
			@confirm="handleConfirm" />
		<StyleModal :show="isStyleModalVisible" @close="closeStyleModal" @confirm="handleStyleConfirm" />
	</view>
</template>

<script>
	import ModalComponent from '@/components/ModalComponent.vue';
	import StyleModal from '@/components/StyleModal.vue';
	import {
		listV,
		getV,
		addV,
		updateV,
		delV
	} from '@/api/view/device_room.js';
	import {
		getRoom,
		delRoom,
		addRoom,
		updateRoom
	} from '@/api/room/room.js';
	import {
		listMode_specific,
		getMode_specific,
		addMode_specific,
		updateMode_specific,
		delMode_specific
	} from '@/api/mode_specific/mode_specific.js';
	import {
		listSpecificmode,
		getSpecificmode,
		addSpecificmode,
		updateSpecificmode,
		delSpecificmode,
	} from '@/api/specificmode/specificmode.js';
	import {
		listMode,
		getMode,
		addMode,
		updateMode,
		delMode
	} from '@/api/mode/mode.js';

	export default {
		components: {
			ModalComponent,
			StyleModal
		},
		data() {
			return {
				selectedDays: [],
				selectedTime: '',
				modeStatus: '',
				sceneName: '',
				isModalVisible: false,
				isStyleModalVisible: false,
				selections: [],
				deviceList: [],
				roomList: [],
				roomName: [],
				Mode_specificList: [],
				newMode: {},
				newspecificmode: {},
				SpecificmodeList: [],
				selectedImage: '',
				showSuccessPopup: false,
			};
		},
		computed: {
			isDaily() {
				return this.selectedDays.length === 7;
			},
			roomNames() {
				console.log("111111");
				return this.rooms.map(room => room.roomName);
			}
		},

		onLoad(options) {
			if (options.selectedDays) {
				this.selectedDays = JSON.parse(decodeURIComponent(options.selectedDays));
			}
			if (options.modeStatus) {

				this.modeStatus = decodeURIComponent(options.modeStatus);
				console.log("this.modeStatus12121", this.modeStatus)
			}
			if (options.selectedTime) {
				this.selectedTime = JSON.parse(decodeURIComponent(options.selectedTime));
			}
			if (options.sceneName) {
				this.sceneName = decodeURIComponent(options.sceneName);
			}
		},
		methods: {

			getView() {
				listV().then(res => {
					this.deviceList = res.rows;
					// console.log("121212", this.deviceList);
				}).catch(error => {
					console.error('Error fetching device:', error);
				});
			},
			getRoomList() {
				getRoom().then(res => {
					console.log(res.rows);
					this.roomList = res.rows;
					this.roomName = res.rows.map(room => room.roomName);
					// console.log(this.roomList);

				});
			},
			getSpecificmode() {
				listSpecificmode().then(res => {
					//console.log(res.rows);
					this.SpecificmodeList = res.rows;
					console.log("this.SpecificmodeList", this.SpecificmodeList);

				});
			},
			// listSpecificmode
			prev() {
				uni.navigateTo({
					url: "/pages/mode/addmode_time"
				})
			},
			getDeviceIcon(types) {
				// 返回房间图标的路径
				switch (types) {
					case '灯泡':
						return '../../static/images/device/dengpao.png';
					case '时钟':
						return '../../static/images/device/shizhong.png';
					case '床':
						return '../../static/images/device/chuang.png';
					case '风扇':
						return '../../static/images/device/fengshan.png';
					case '冰箱':
						return '../../static/images/device/bingxiang.png';
					case '马桶':
						return '../../static/images/device/matong.png';
					case '游戏手柄':
						return '../../static/images/device/shoubing.png';
					case '台灯':
						return '../../static/images/device/taideng.png';
					case '手机':
						return '../../static/images/device/shouji.png';
					case '电视':
						return '../../static/images/device/dianshi.png';
					case '锅':
						return '../../static/images/device/guo.png';
					case '插座':
						return '../../static/images/device/chazuo.png';
					case '插头':
						return '../../static/images/device/chatou.png';
					case '空调':
						return '../../static/images/device/kongtiao.png';
					default:
						return '../../static/images/device/qita.png';
				}
			},
			openModal() {
				this.getView();
				this.getRoomList();
				this.isModalVisible = true;
				// console.log(this.isModalVisible);
			},
			closeModal() {
				this.isModalVisible = false;
			},
			handleConfirm(selection) {
				this.selections.push(selection);
				this.isModalVisible = false;
				console.log("selections", this.selections);
				console.log("selections", this.selections);
			},

			removeSelection(index) {
				this.selections.splice(index, 1);
			},
			// 新增
			submitSelection() {
				console.log("cccccc", this.selectedTime.time, this.selectedDays.length, "selection", this.selections, this
					.selectedImage);
				//console.log("this1", this.selections[0].status);
				if (this.selectedDays.length >= 0 && this.selections.length > 0 && this
					.selectedImage && this.selections[0].status) {
					//console.log('开始新增');
					this.newMode.modeName = this.sceneName;
					this.newMode.modeStatus = this.convertStatus(this.selections[0].status);
					this.newMode.modePic = this.selectedImage.slice(-6, -4); //图片地址
					this.newMode.begintime = this.selectedTime.time;
					this.newMode.day = this.selectedDays.join(','); //星期
					this.addnewMode(this.newMode);
					console.log("newMode", this.newMode);
					// console.log("this.modeStatus",this.selections.status);
					// console.log("newMode",this.selectedImage.slice(-6, -4));
				} else {
					uni.showToast({
						title: '没有填写完整',
						icon: 'none'
					});
					return; // 阻止跳转
				}

			},
			addnewMode(newMode) {
				// console.log("111", this.newMode);
				addMode(this.newMode).then(responseData => {
					console.log("Response Data:", responseData);
					//this.$modal.showToast('添加成功');
					const newId = responseData.modeId;
					console.log("newId", newId);
					this.addSpecificmodeList(newId);

				}).catch(error => {
					console.error('新增情景失败:', error.response ? error.response.data : error);
					uni.showToast({
						title: '新增情景失败，请重试',
						icon: 'none'
					});

				});
			},
			// 新增情景动作
			addSpecificmodeList(modeid) {
				console.log("1111111111");

				this.selections.forEach(selection => {
					console.log("selection.deviceid", selection.deviceid);
					console.log("selection.status");
					this.newspecificmode.modeId = modeid;
					this.newspecificmode.deviceId = selection.deviceid;
					this.newspecificmode.deviceStatus = this.convertStatus(selection.status);
					this.addSpecificmodeList2(this.newspecificmode);
				});
			},
			convertStatus(status) {
				switch (status) {
					case '打开':
						return 'true';
					case '关闭':
						return 'false';
					default:
						return '自动';
				}
			},
			addSpecificmodeList2(newspecificmode) {
				console.log("111newspecificmode", this.newspecificmode);
				addSpecificmode(this.newspecificmode).then(() => {
					this.$modal.showToast('添加成功');
					this.showSuccess();

				}).catch(error => {
					console.error('新增情景动作失败:', error.response ? error.response.data : error);
					uni.showToast({
						title: '新增情景动作失败，请重试',
						icon: 'none'
					});

				});
			},
			showSuccess() {
				this.showSuccessPopup = true;
				setTimeout(() => {
					this.showSuccessPopup = false;
					uni.navigateTo({
						url: "/pages/mode/mode",
						success: () => {

						}
					});
				}, 1000);

			},
			openStyleModal() {
				this.isStyleModalVisible = true;
			},
			closeStyleModal() {
				this.isStyleModalVisible = false;
			},
			handleStyleConfirm(selectedImage) {
				// 处理选择的图片
				// console.log('Selected Image:', selectedImage);
				this.selectedImage = selectedImage;
				this.isStyleModalVisible = false;

			},
			getMode_specific() {
				listMode_specific().then(res => {
					console.log(res.rows);
					this.Mode_specificList = res.rows;
					// console.log(this.roomList);
				});
			},
			getModeList() {
				getMode().then(res => {
					console.log("ModeList", res.rows);
					this.ModeList = res.rows;
					// console.log(this.roomList)
				})
			},
			convertStatus(status) {
				switch (status) {
					case '打开':
						return 'true';
					case '关闭':
						return 'false';
					default:
						return '自动';
				}
			}
		},
		onShow() {
			this.getView();
			this.getRoomList();
			// this.getMode_specific();
			this.getModeList();
			this.getSpecificmode();
		}
	};
</script>

<style scoped>
	page {
		background-color: #f4f4f4;
	}

	/* .container {
    padding: 20px;
} */
	.top {
		display: flex;
		align-items: center;
		height: 52px;
		background-color: white;
		padding: 4px;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		border-bottom: 1.5px solid #f0f0f0;
	}

	.prev-icon {
		flex: 1;
		width: 100%;
		height: 100%;
		object-fit: contain;
		padding: 3px;
	}

	.myroom {
		flex: 7;
		font-size: 18px;
		color: #0a0d14;
		font-weight: bold;
		text-align: center;
	}

	.plus-icon-container {
		position: relative;
	}

	.plus-icon {
		width: 30px;
		height: 40px;
		object-fit: contain;
		margin-right: 10px;
	}

	.if-List {
		margin-top: 132rpx;
		display: flex;
		flex-direction: column;
		padding: 42rpx;

	}

	.text_image {
		width: 64rpx;
		height: 64rpx;
	}

	.text_image1 {
		width: 74rpx;
		height: 74rpx;
	}

	.text-List {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: white;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.text-List1 {
		margin-bottom: 34rpx;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: white;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.if_and {
		display: flex;
		flex-direction: column;
	}

	.if_and1 {
		display: flex;
		flex-direction: column;
		margin-right: 112rpx;
	}

	.if {
		margin: 5px 0;
		font-size: 45rpx;
		font-weight: bold;
	}

	.if1 {
		margin: 5px 0;
		font-size: 35rpx;
		font-weight: bold;
	}

	.if_text {
		margin: 5px 0;
		color: #989898;
		/* font-size: 72rpx; */
	}

	.if_image {
		width: 54rpx;
		height: 54rpx;
	}

	.if_image1 {
		width: 42rpx;
		height: 42rpx;
	}

	.if_image2 {
		border-radius: 34rpx;
		width: 59rpx;
		height: 55rpx;
	}

	.selected-items {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.selected-item {
		margin-right: 10rpx;
	}

	.device-List {
		display: flex;
		flex-direction: column;
		padding: 42rpx;

	}

	.device-List2 {
		display: flex;
		flex-direction: column;
		padding: 42rpx;
		margin-top: -32px;
	}

	.device-List3 {
		display: flex;
		flex-direction: column;
		padding: 42rpx;
		margin-top: -12px;
	}

	.button {
		margin-top: 102rpx;
		height: 12%;
		width: 40%;
		background-color: #598ff2;
	}
</style>